<?--
 Copyright (C) 2019 The Android Open Source Project

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 -->

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css" >
        <link rel="stylesheet" type="text/css" href="controls.css" >
        <link rel="stylesheet" type="text/css" href="custom.css" >
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined">
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    </head>
    <body>
      <div id="loader"></div>
      <div id="error-message-div">
        <h3 id="error-message" class="hidden">
          <span class="material-icons close-btn">close</span>
        </h3>
      </div>
      <section id="device-connection">
        <div id='controls-and-displays'>
          <div id='control-panel-default-buttons' class='control-panel-column'>
            <button id='power_btn' title='Power' disabled='true' class='material-icons'>power_settings_new</button>
            <button id='bluetooth-modal-button' title='Bluetooth console' class='material-icons'>
              settings_bluetooth
            </button>
            <button id='back_btn' title='Back' disabled='true' class='material-icons'>arrow_back</button>
            <button id='home_btn' title='Home' disabled='true' class='material-icons'>home</button>
            <button id='menu_btn' title='Menu' disabled='true' class='material-icons'>menu</button>
            <button id='mouse_btn' title='Mouse' disabled='true' style="display:none" class='material-icons'>mouse</button>
            <button id='keyboard-modal-button' title='keyboard console' class='material-icons'>keyboard</button>
            <button id='touchpad-modal-button' title='Touchpads' class='material-icons'>touch_app</button>
            <button id='rotate_left_btn' title='Rotate left' disabled='true' class='material-icons' data-adb="true">rotate_90_degrees_ccw</button>
            <button id='rotate_right_btn' title='Rotate right' disabled='true' class='material-icons' data-adb="true">rotate_90_degrees_cw</button>
            <button id='volume_up_btn' title='Volume up' disabled='true' class='material-icons'>volume_up</button>
            <button id='volume_down_btn' title='Volume down' disabled='true' class='material-icons'>volume_down</button>
            <button id='volume_off_btn' title='Volume off' class='material-icons'>volume_off</button>
            <button id='camera_off_btn' title='Capture camera' class='material-icons'>videocam_off</button>
            <button id='record_video_btn' title='Record screen' class='material-icons'>movie_creation</button>
            <button id='mic_btn' title='Microphone' disabled='true' class='material-icons'>mic_off</button>
            <button id='location-modal-button' title='location console' class='material-icons'>location_on</button>
            <button id='device-details-button' title='Device Details' class='material-icons'>info</button>
            <button id='rotation-modal-button' title='Rotation sensors' class='material-icons'>more_vert</button>
          </div>
          <div id='control-panel-custom-buttons' class='control-panel-column'></div>
          <div id="device-display-column">
            <!-- tabindex="-1" allows this element to capture keyboard events -->
            <div id='device-displays' tabindex="-1">
            </div>
          </div>
          <button id='display-add-modal-button' title='Add display' class='material-icons'>add_to_queue</button>
        </div>
        <!-- Audio tags of id with a prefix of "device-audio" will be inserted here dynamically
        based on the number of audio streams.-->
      </section>
      <div id='device-details-modal' class='modal'>
        <div id='device-details-modal-header' class='modal-header'>
          <h2>Device Details</h2>
          <button id='device-details-close' title='Close' class='material-icons modal-close'>close</button>
        </div>
        <hr>
        <h3>Hardware Configuration</h3>
        <span id='device-details-hardware'>unknown</span>
      </div>
      <div id='bluetooth-modal' class='modal-wrapper'>
        <div id='bluetooth-prompt' class='modal'>
          <div id='bluetooth-prompt-header' class='modal-header'>
            <h2>Bluetooth</h2>
            <button id='bluetooth-prompt-close' title='Close' class='material-icons modal-close'>close</button>
          </div>
          <div>
            <div id='bluetooth-prompt-text' class='bluetooth-text'>
            We have enabled a BT Wizard to simplify adding a<br>bluetooth device.<br>
            Alternatively, you can enter the BT Console if you<br>want to exercise full control.</div><br>
            <div class='bluetooth-button'>
              <button id='bluetooth-prompt-wizard' title='Start Wizard' class='modal-button-highlight'>Start Wizard</button>
              <button id='bluetooth-prompt-list' title='Device List' class='modal-button'>Device List</button>
              <button id='bluetooth-prompt-console' title='BT Console' class='modal-button'>BT Console</button>
            </div>
          </div>
        </div>
        <div id='bluetooth-wizard' class='modal'>
          <div id='bluetooth-wizard-modal-header' class='modal-header'>
            <h2>BT Wizard</h2>
            <button id='bluetooth-wizard-close' title='Close' class='material-icons modal-close'>close</button>
          </div>
          <div>
            <div class='bluetooth-text-field'><input type="text" id='bluetooth-wizard-name' placeholder="Device Name"></input></div>
            <div class='bluetooth-drop-down'>
              <select id='bluetooth-wizard-type' validate-mac="true" required>
                <option value="beacon">Beacon</option>
              </select>
            </div>
            <div class='bluetooth-text-field'><input type="text" id='bluetooth-wizard-mac' placeholder="Device MAC" validate-mac="true" required></input><span></span></div>
            <div class='bluetooth-button'>
              <button id='bluetooth-wizard-device' title='Add Device' class='modal-button-highlight' disabled>Add Device</button>
              <button id='bluetooth-wizard-cancel' title='Cancel' class='modal-button'>Cancel</button>
            </div>
          </div>
        </div>
        <div id='bluetooth-wizard-confirm' class='modal'>
          <div id='bluetooth-wizard-confirm-header' class='modal-header'>
            <h2>BT Wizard</h2>
            <button id='bluetooth-wizard-confirm-close' title='Close' class='material-icons modal-close'>close</button>
          </div>
          <div id='bluetooth-wizard-text' class='bluetooth-text'>Device added. See device details below.</div><br>
          <div class='bluetooth-text'>
            <p>Name: <b>GKeyboard</b></p>
            <p>Type: <b>Keyboard</b></p>
            <p>MAC Addr: <b>be:ac:01:55:00:03</b></p>
          </div>
          <div class='bluetooth-button'><button id='bluetooth-wizard-another' title='Add Another' class='modal-button-highlight'>Add Another</button></div>
        </div>
        <div id='bluetooth-list' class='modal'>
          <div id='bluetooth-list-header' class='modal-header'>
            <h2>Device List</h2>
            <button id='bluetooth-list-close' title='Close' class='material-icons modal-close'>close</button>
          </div>
          <div class='bluetooth-text'>
            <div><button title="Delete" data-device-id="delete" class="bluetooth-list-trash material-icons">delete</button>GKeyboard | Keyboard | be:ac:01:55:00:03</div>
            <div><button title="Delete" data-device-id="delete" class="bluetooth-list-trash material-icons">delete</button>GHeadphones | Audio | dc:fa:32:00:55:02</div>
          </div>
        </div>
        <div id='bluetooth-console' class='modal'>
          <div id='bluetooth-console-modal-header' class='modal-header'>
            <h2>BT Console</h2>
            <button id='bluetooth-console-close' title='Close' class='material-icons modal-close'>close</button>
          </div>
          <div>
            <div colspan='2'><textarea id='bluetooth-console-view' readonly rows='10' cols='60'></textarea></div>
            <div width='1'><p id='bluetooth-console-cmd-label'>Command:</p></div>
            <div width='100'><input id='bluetooth-console-input' type='text'></input></div>
      </div>
    </div>
      </div>
      <div id='location-modal' class='modal-wrapper'>

        <!-- location-prompt-modal modal -->
        <div id='location-prompt-modal' class='modal'>
          <div id='location-prompt-modal-header' class='modal-header'>
            <h2>Location</h2>
            <button id='location-prompt-modal-close' title='Close' class='material-icons modal-close'>close</button>
          </div>
          <div>
            <div id='location-prompt-text' class='location-text'>
              <div class='location-button'>
                <button id='location-set-wizard' title='Set location' class='modal-button-highlight'>Set Location</button>
                <button id='locations-import-wizard' title='Import locations' class='modal-button'>Import Locations</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- location-set modal -->
      <div id='location-set-modal' class='modal'>
        <div id='location-set-modal-header' class='modal-header'>
          <h2>Set Location</h2>
          <button id='location-set-modal-close' title='Close' class='material-icons modal-close'>close</button>
        </div>
        <div>
          <div class='location-text-field'><input type=number step=0.01 min="-180" max="180" value=-122.083 id='location-set-longitude' placeholder="Longitude" required></input></div>
          <div class='location-text-field'><input type=number step=0.01 min="-90" max="90" value=37.415 id='location-set-latitude' placeholder="Latitude" required></input></div>
          <div class='location-text-field'><input type=number step=0.01 value=0.0 id='location-set-altitude' placeholder="Elevation"required></input>
        </div>
          <div class='location-button'>
            <button id='location-set-confirm' title='Confirm Location' class='modal-button-highlight'>Update Location</button>
            <button id='location-set-cancel' title='Cancel' class='modal-button'>Cancel</button>
          </div>
        </div>
      </div>
      <!-- locations-import modal -->
      <div id='locations-import-modal' class='modal'>
        <div id='locations-import-modal-header' class='modal-header'>
          <h2>Import Locations</h2>
          <button id='locations-import-modal-close' title='Close' class='material-icons modal-close'>close</button>
        </div>

              <div class='location-text'>
                <input type='file' id='locations_select_file' accept=".gpx, .kml">
                <button id='locations-send-btn' title='Send Locations' class='modal-button-highlight'>Send Locations</button>

              </div>

      </div>
      <div id='keyboard-modal' class='modal-wrapper'>

        <!-- keyboard-prompt-modal modal -->
        <div id='keyboard-prompt-modal' class='modal'>
          <div id='keyboard-prompt-modal-header' class='modal-header'>
            <h2>Keyboard</h2>
            <button id='keyboard-prompt-modal-close' title='Close' class='material-icons modal-close'>close</button>
          </div>
          <div>
            <div id='keyboard-prompt-text' class='keyboard-text'>
              <div class='function-key-button'>
                <button id='shift-button' title='Shift' class='modal-button'>Shift</button>
                <button id='alt-button' title='Alt' class='modal-button'>Alt</button>
                <button id='ctrl-button' title='Ctrl' class='modal-button'>Ctrl</button>
                <button id='super-button' title='Super' class='modal-button'>Super</button>
              </div>
              <hr>
              <div class='keyboard-button'>
                <button id='tab-button' title='Tab' class='modal-button'>Tab</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id='rotation-modal' class='modal'>
        <div id='rotation-modal-header' class='modal-header'>
            <h2>Rotation sensors</h2>
            <button id='rotation-modal-close' title='Close' class='material-icons modal-close'>close</button>
        </div>
        <hr>
        <h3>Rotate the device</h3>
        <span id='rotation-bar'>
          <div class='roation-slider'>
            X
            <input class='rotation-slider-range' type='range' value='0' min='-180' max='180' step='0.1'>
            <span class='rotation-slider-value'>0</span>
          </div>
          <br>
          <div class='rotation-slider'>
            Y
            <input class='rotation-slider-range' type='range' value='0' min='-180' max='180' step='0.1'>
            <span class='rotation-slider-value'>0</span>
          </div>
          <br>
          <div class='rotation-slider'>
            Z
            <input class='rotation-slider-range' type='range' value='0' min='-180' max='180' step='0.1'>
            <span class='rotation-slider-value'>0</span>
          </div>
          <br>
        </span>
        <div class='fixed-orientation'>
          <button id='left-position-button'  title='left' class='material-icons'>crop_landscape</button>
          <button id='upright-position-button' title='upright' class='material-icons'>crop_portrait</button>
          <button id='right-position-button' title='right' class='material-icons'>crop_landscape</button>
          <button id='upside-position-button' title='upside down' class='material-icons'>crop_portrait</button>
        </div>
        <div class='sensors'>
          <div id='accelerometer'>
            Accelerometer:
            <span id='accelerometer-value'>0.00 9.81 0.00</span>
          </div>
          <div id='magnetometer'>Magnetometer:
            <span id='magnetometer-value'>0 5.9 -48.4</span>
          </div>
          <div id='gyroscope'>Gyroscope:
            <span id='gyroscope-value'>0.00 0.00 0.00</span>
          </div>
        </div>
      </div>
      <div id='touchpad-modal' class='modal'>
        <div id='touchpad-modal-header' class='modal-header'>
            <button id='touchpad-modal-close' title='Close' class='material-icons modal-close'>close</button>
        </div>
        <span id='touchpad-list'>
          <div class='selectors'></div>
          <div class='touchpads'></div>
        </span>
      </div>
      <div id='display-add-modal' class='modal'>
        <div id='display-add-modal-header' class='modal-header'>
          <h2>Add display</h2>
          <button id='display-add-modal-close' title='Close' class='material-icons modal-close'>close</button>
        </div>
        <div>
          <select id='display-spec-preset-select'>
            <!-- setupDisplaySpecPresetSelector adds its options -->
          </select>
          <div class='display-spec-form'>
            <label class='display-spec-label'>width<input type=number min=1 id='display-spec-width' required/></label>
            <label class='display-spec-label'>height<input type=number min=1 id='display-spec-height' required/></label>
            <label class='display-spec-label'>dpi<input type=number min=1 id='display-spec-dpi' required/></label>
            <label class='display-spec-label'>refresh_rate_hz<input type=number min=1 id='display-spec-refresh-rate-hz' required/></label>
          </div>
          <button id='display-add-confirm' title='Add a new display' class='modal-button'>Add</button>
        </div>
      </div>
      <script src="js/adb.js"></script>
      <script src="js/location.js"></script>
      <script src="js/keyboard.js"></script>
      <script src="js/rootcanal.js"></script>
      <script src="js/cf_webrtc.js" type="module"></script>
      <script src="js/controls.js"></script>
      <script src="js/touch.js"></script>
      <script src="js/mouse.js"></script>
      <script src="js/app.js"></script>
      <template id="display-template">
        <div class="device-display">
          <div class="device-display-info">
            <div class="device-display-info-text"></div>
            <button class="material-icons device-display-remove-button" title="Remove display">delete</button>
          </div>
          <div class="device-video-container">
            <video autoplay muted playsinline src="/" class="device-display-video"></video>
          </div>
        </div>
      </template>
    </body>
</html>
